import React from 'react';
import { Link } from 'react-router';
import { hashHistory } from 'react-router';
require("./home.css");
require("./log.css");

class Home extends React.Component {

    // 判断session里面是否存有用户的职信号，如果有说明该用户当前已是登录状态则可以来回跳转任何页面，
    // 反之，该用户当前未登录，不管进去哪个url，都将会跳转到‘/’即http://localhost:8080/#/
    constructor() {
        super();
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        console.log(userSessionStorage);
        if(userSessionStorage == null){
            hashHistory.push('/');
        }else {
            this.state={
                checked : false,
                loginID : userSessionStorage.user_id,
                loginName : userSessionStorage.user_name,
                loginPart : '',
                loginJob : '',
                loginImage : userSessionStorage.user_image
            };
            console.log("Home.js"+this.state.loginID);
            console.log("Home.js"+this.state.loginImage);
        }
    }

    // 在组件渲染之前预加载该用户的部门以及职位的数据
    componentWillMount(){
        this.LoadData();
    }

    // 提交用户账号从服务端获得该用户的部门和职位
    LoadData(){
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        fetch("http://121.196.202.247:1010/user_login/?user_id="+userSessionStorage.user_id, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({loginPart: responseText.department_name});
                this.setState({loginJob: responseText.zhiwei});
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    handleClick(){
        this.setState({
            checked: !this.state.checked
        });
    }

    render() {
        const style = {
            active: {
                color: '#2E7CDE',
                fontWeight:'bold'
            },
            rowStyle: {
                backgroundColor: this.state.checked ? 'rgba(153, 204, 255, 0.5)' : 'transparent',
                paddingTop: 10+'px',
                paddingBottom: 10+'px'
            }
        };

        return (
            <div className="home">
                <div className="home_head">
                    <p className="home_title">
                    <b className="home_bigtitle">职信 </b>
                    <b className="home_smalltitle">人才改变世界</b>
                    <Link to='/'><img src="../images/quit.png" className="home_exit"/></Link>
                    </p>
                </div>
                <div className="home_body">
                    <div className="left_nav">
                        <div className="home_nav">
                            <ol role="nav">
                                <li style={style.rowStyle} className="nav_li"><Link to="/home_main_hr" activeStyle={style.active} className="nav_li"><img src="../images/home.png" />&nbsp;首页</Link></li>
                                {/*<li style={style.rowStyle} className="nav_li"><Link to="/home_record_hr" activeStyle={style.active} className="nav_li"><img src="../images/record.png" />&nbsp;记录</Link></li>*/}
                                <li style={style.rowStyle} className="nav_li"><Link to="/home_import_hr" activeStyle={style.active} className="nav_li"><img src="../images/batch.png" />&nbsp;批量导入</Link></li>
                                <li style={style.rowStyle} className="nav_li"><Link to="/home_query_hr" activeStyle={style.active} className="nav_li"><img src="../images/query.png" />&nbsp;查询信息</Link></li>
                                <li style={style.rowStyle} className="nav_li"><Link to="/home_job_hr" activeStyle={style.active} className="nav_li"><img src="../images/record.png" />&nbsp;添加岗位</Link></li>
                                <li style={style.rowStyle} className="nav_li"><Link to="/home_me_hr" activeStyle={style.active} className="nav_li"><img src="../images/me.png" />&nbsp;我的</Link></li>
                            </ol>
                        </div>
                        <hr/>
                        <div className="QR_code">
                            <p>职信手机版</p>
                            <table className="QR_table">
                                <tr>
                                    <td>Android</td>
                                </tr><br/>
                                <tr>
                                    <td><img src="../images/QR_code_android.png" /></td>
                                </tr><br/>
                                <tr>
                                    <td>iOS</td>
                                </tr><br/>
                                <tr>
                                    <td><img src="../images/QR_code_ios.png" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div className="right_nav">
                        <div className="home_me">
                            <div className="user_photo">
                                <div className="user_photo_img">
                                    <img src={this.state.loginImage} alt="头像"/>
                                </div>
                            </div>
                            <div className="user_info">
                                <p className="user_name">{this.state.loginName}</p>
                                <p className="user_id">职信号：</p>
                                <p className="user_id">{this.state.loginID}</p>
                                <p className="user_part">{this.state.loginPart}</p>
                                <p className="user_job">{this.state.loginJob}</p>
                            </div><br/>

                            <div className="user_img">
                                <Link to="/"><img src="../images/quit.png" className="me_quit_img"/></Link>
                                <Link to="/home_me_hr"><img src="../images/setting.png" className="me_set_img"/></Link>
                            </div>
                        </div>
                        <hr/>
                        {/*<div className="home_find">*/}
                            {/*<Link to="/home_record_hr"><img src="../images/mapping.png" className="find_left_img"/></Link>*/}
                            {/*<img src="../images/refresh.png" className="find_right_img"/>*/}
                            {/*<div className="home_record">*/}
                                {/*<div className="home_staff_photo"><img src="../images/staff.png"/></div>*/}
                                {/*<div className="home_staff_record_top">*/}
                                    {/*<p>&nbsp;小张&nbsp;&nbsp;财务部&nbsp;&nbsp;职员</p>*/}
                                    {/*<p>今日目标完成，明天继续加油！</p>*/}
                                {/*</div>*/}
                                {/*<div className="home_staff_record_tail">*/}
                                    {/*<p>自我评价：今天很充实！</p>*/}
                                    {/*<p>星级评价：<img src="../images/star2.png"/><img src="../images/star2.png"/>*/}
                                        {/*<img src="../images/star2.png"/><img src="../images/star1.png"/><img src="../images/star1.png"/></p>*/}
                                    {/*<p><span>评语</span>&nbsp;&nbsp;&nbsp;<span>回复</span></p><br/>*/}
                                {/*</div>*/}
                            {/*</div>*/}

                            {/*<div className="home_record">*/}
                                {/*<div className="home_staff_photo"><img src="../images/staff.png"/></div>*/}
                                {/*<div className="home_staff_record_top">*/}
                                    {/*<p>小张&nbsp;&nbsp;财务部&nbsp;&nbsp;职员</p>*/}
                                    {/*<p>今日目标完成！</p>*/}
                                {/*</div>*/}
                                {/*<div className="home_staff_record_tail">*/}
                                    {/*<p>自我评价：今天很充实！</p>*/}
                                    {/*<p>星级评价：<img src="../images/star2.png"/><img src="../images/star2.png"/>*/}
                                        {/*<img src="../images/star2.png"/><img src="../images/star1.png"/><img src="../images/star1.png"/></p>*/}
                                    {/*<p><span>评语</span>&nbsp;&nbsp;&nbsp;<span>回复</span></p><br/>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                    </div>

                    <div className="home_main">{this.props.children}</div>
                </div>
            </div>
        );
    };
}

export default Home;